<template>
	<view>
	<!-- 	<view
			class="flex align-center justify-center text-white"
			style="font-size: 32rpx;font-weight: 500; position: fixed;top: 0;"
			:style="'height:' + navHeight + 'px;margin-top:' + navbarTop + 'px'"
		>
			个人中心
			
		</view> -->
		<view id="top" style="background-image: url(https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/1cc7c30581314359a3e6876fce47937d.png);background-repeat: no-repeat; background-size: 100% 100%; width: 750rpx;position: fixed;top: 0;z-index: 999;height: 200rpx;overflow: hidden;">
			<view class="flex align-center justify-center text-white" style="font-size: 36rpx;font-weight: 500;" :style="'height:' + navHeight +'px;margin-top:'+navbarTop+'px'">
				个人中心
			</view>
		
		</view>
		<view
			id="top"
			
			style="background-image: url(https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/dcd866093e454a788924abeec7ee4e30.png);background-repeat: no-repeat; background-size: cover; width: 750rpx;z-index: 999; overflow: hidden; margin-top: 199rpx;"
		>
		
			<view class="headBox">
				<image :src="hasLogin && userInfo.avatarUrl ? userInfo.avatarUrl : '../../static/user/touxiang-@2x.png'" class="img" mode="aspectFill"></image>
				<view class="bad">
					<view class="top">
						<text v-show="!userInfo.nickname">未设置昵称</text>
						<text v-show="userInfo.nickname">{{ userInfo.nickname }}</text>
					</view>
					<view class="boi">
						<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/f9ba7e9014754bb8be96df900fe293b8.png" mode=""></image>
						<view class="mf">{{ father }}</view>

						<view class="">{{ fatherPhone }}</view>
					</view>
				</view>
			</view>
			<view class="dingdan">
				<view class="title">我的订单</view>
				<view class="bodd">
					<view class="iteme" @click="navTo('/pages/order/list?state=0')">
						<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/9915c6df34924dcd8be9ba3963458f92.png" mode=""></image>
						<view class="bme">全部订单</view>
					</view>
					<view class="iteme" @click="navTo('/pages/order/list?state=1')">
						<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/96ab8ec3777a402fa447e4e26de92433.png" mode=""></image>
						<view class="bme">待付款</view>
					</view>
					<view class="iteme" @click="navTo('/pages/order/list?state=2')">
						<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/08962990747a4aefa4eb29a25465f93b.png" mode=""></image>
						<view class="bme">待收货</view>
					</view>
					<view class="iteme" @click="navTo('/pages/order/list?state=3')">
						<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/f786081c1b234cfe9eb640f6fdc0cfa9.png" mode=""></image>
						<view class="bme">待评价</view>
					</view>
				</view>
			</view>
			<!-- 	<view class="padding-lr" style="padding-bottom: 22rpx;padding-top: 20rpx;">
				<view @click="naviageToPage('/pages/product/search')" style="height: 64rpx;" class="bg-white round flex align-center">
					<view class="flex align-center padding-left">
						<text class="yticon icon-sousuo" style="margin-right: 10rpx;"></text><text class="lem-text-gray" style="font-size: 26rpx;">新鲜，搜一下就涞了</text>
					</view>
				</view>
			</view> -->
		</view>
		<view class="bate" v-if="storage">
			<view class="itemOne" @click="goOdershare()">
				<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/9cb37e83ef6f4999bdc3ffe1d0f45b87.png" mode=""></image>
				<view class="txt">邀请助力</view>
			</view>
			<view class="itemOne" @click="chengweiBtn">
				<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/d5d59dc0e22c4a7c9fa3788ed5a6030d.png" mode=""></image>
				<view class="txt">成为团长</view>
			</view>
			<view class="itemOne" @click="navTo('/pages/address/list')">
				<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/ccbbacd982a44c8596ebdec3a98f7500.png" mode=""></image>
				<view class="txt">地址管理</view>
			</view>
			<view class="itemOne"  @click="navTo('/pagesA/PanicBuying/PanicBuying')">
				<image src=" https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/3cabc26bc7d449f5928b8c9d230bf656.png" mode=""></image>
				<view class="txt">优惠券</view>
			</view>
			<view class="itemOne" @click="navTo('/pages/user/coupons')">
				<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/beb01ab04bd54d65a6df6970d174ec97.png" mode=""></image>
				<view class="txt">抢购券</view>
			</view>
			<view class="itemOne" @click="navTo('/pages/product/favorite')">
				<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/f404c72153cd4812b4bf7ab6bbfa9559.png" mode=""></image>
				<view class="txt">我的收藏</view>
			</view>
			<view class="itemOne" @click="navTo('/pages/user/deliver')">
				<image src=" https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/2f208c895ed24d188666fd4f835a535c.png" mode=""></image>
				<view class="txt">配送时间</view>
			</view>
			<view class="itemOne" @click="GoList()">
				<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/6d99b85a0d814f8c850540b60b8c0a58.png" mode=""></image>
				<view class="txt">成为合作社</view>
			</view>
			<view class="itemOne">
				<button type="default" open-type="contact"></button>
				<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/599d1d88efd74a4bab0ba80fdb316314.png" mode=""></image>
				<view class="txt">在线客服</view>
			</view>
			<view class="itemOne" @click="navTo('/pages/user/about')">
				<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/5c69e089817e49ae8327d035b121373f.png" mode=""></image>
				<view class="txt">关于</view>
			</view>
			<view class="itemOne" @click="navTo('/pages/set/set')">
				<image src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/8a56c9e800b6443abb6e0efd4e48a951.png" mode=""></image>
				<view class="txt">设置</view>
			</view>
		</view>
		<view class="bate" v-if="storage">
			<view class="itemOneTwo" v-for="(item,index) in bannList" @click="goLe(index)">
				<image :src="item.image" mode=""></image>
				<view class="txt">{{ item.title }}</view>
			</view>
		</view>
		<view v-else style="padding-top: 180rpx;padding-bottom: 180rpx;">
			<missing
				:buttonName="'换个地址试试吧~'"
				:handlerName="'buttonClick'"
				@buttonClick="chooseLocation"
				:imgUrl="'http://qiniuoss.nauzone.cn/%E7%BB%84%204%20%E6%8B%B7%E8%B4%9D@3x.png'"
				:desc="'当前地区不在配送范围哦'"
			></missing>
		</view>
	</view>
</template>

<script>
import listCell from '@/components/mix-list-cell';
import missing from '@/components/missing.vue';
import { mapState } from 'vuex';
let startY = 0,
	moveY = 0,
	pageAtTop = true;
export default {
	components: {
		listCell,
		missing
	},
	data() {
		return {
			navbarTop: 26,
			navHeight: 32,
			navBottom: 58,
			MT: 38,
			MT2: 20,
			statusHeight: '',
			topHeight: 156,
			scollHeight: 500,
			bannList: [
				{
					title: '手机充值',
					image: 'https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/5ab194832a7e4b5ca01ff6498b56d366.png'
				},
				{
					title: '生活缴费',
					image: 'https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/f8ab890e67344ca7b4c2180e2642b706.png'
				},
				{
					title: '涞了么公益',
					image: 'https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/0355694a2bb24aff8e3ad8b63c8a5520.png'
				},
				{
					title: '火车票机票',
					image: 'https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/e1d6834718d148a3a00a5440e8c897a7.png'
				},
				{
					title: '涞了么出行',
					image: 'https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/9cebe11b55b64c6fa03c6049ec846e2a.png'
				},
				{
					title: '酒店入住',
					image: 'https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/0bf20c95b6234212aea0dea92381a62a.png'
				}
			],

			allOder: '',
			nickname: '',
			coverTransform: 'translateY(0px)',
			coverTransition: '0s',
			moving: false,
			footprintList: [],
			isVip: false,
			statusBarHeight: 88,
			storage: false,
			banner: {
				imgUrl: ''
			},
			userInfotz: {},
			avatarUrl: '',
			nickNameb: '',
			shenhezhong: '',
			father: '涞了么，来了',
			fatherPhone: ''
		};
	},
	onReady() {
		const res = uni.getSystemInfoSync();
		console.log(res.statusBarHeight);
		this.statusHeight = res.statusBarHeight;

		// #ifdef MP-WEIXIN
		console.log('状态栏高度');
		console.log(this.statusHeight + 'px');
		this.navbarTop = wx.getMenuButtonBoundingClientRect().top;
		this.navHeight = wx.getMenuButtonBoundingClientRect().height;
		console.log('标题栏高度');
		console.log(this.navHeight + 'px');
		this.navBottom = wx.getMenuButtonBoundingClientRect().bottom;
		console.log('底部坐标');
		console.log(this.navBottom + 'px');
		this.MT = this.navBottom;
		console.log('定位栏外边框高度');
		console.log(this.MT + 'px');
		// #endif
		this.MT2 = this.MT - 20;
		// #ifdef APP-PLUS
		this.navbarTop = this.statusHeight;
		this.navHeight = 44;
		// this.navBottom =  this.navHeight + 20
		// this.MT = this.navBottom
		this.navBottom = this.navHeight;
		this.MT2 = this.navBottom;
		// #endif

		const that = this;
		setTimeout(() => {
			const query = uni.createSelectorQuery().in(this);
			query
				.select('#top')
				.boundingClientRect(data => {
					console.log('得到布局位置信息' + data);
					console.log('节点离页面顶部的距离为' + data.top);
					// that.topHeight = data.height
					// that.scollHeight = res.screenHeight - 50 - that.topHeight
					// #ifdef APP-PLUS
					//that.topHeight = data.height + (that.statusHeight/2)
					// that.topHeight = 146
					// that.scollHeight = res.screenHeight - that.topHeight
					// #endif
					console.log('可使用高度为：');
					console.log(that.scollHeight);
				})
				.exec();
		}, 3000);
	},
	onShow() {
		this.shenhezhong = uni.getStorageSync('shenhezhong');
		// this.nickNameb = uni.getStorageSync('nickNameb')
		// this.avatarUrl = uni.getStorageSync('avatarUrl')
		this.userInfotz = uni.getStorageSync('userInfo');
		console.log('userInfotz111', this.userInfotz);

		this.isVip = this.$api.isVip();
		this.loadFootprint();

		this.$store.state.storageId ? (this.storage = true) : (this.storage = false), this.chauxn();
		//如果用户已登录，获取购物车数量
		if (this.$store.state.userInfo.accessToken) {
			this.$api
				.request('cart', 'countCart')
				.then(res => {
					if (res.data > 0) {
						uni.setTabBarBadge({
							index: 2,
							text: res.data + ''
						});
					}
					this.$store.commit('addCart', res.data);
				})
				.catch(err => {
					// this.$api.msg('请求失败，请稍后再试')
				});
		}

		this.showAllOrder();
		this.showTuan();
	},
	onLoad() {
		this.nickname = uni.getStorageSync('nickname');

		try {
			const res = uni.getSystemInfoSync();
			this.statusBarHeight = res.statusBarHeight;
		} catch (e) {
			// error
		}
		this.$api
			.request('advertisement', 'getActiveAd', {
				adType: 8
			})
			.then(res => {
				this.banner = res.data[0];
			});
	},
	// #ifndef MP
	onNavigationBarButtonTap(e) {
		const index = e.index;
		if (index === 0) {
			this.navTo('/pages/set/set');
		} else if (index === 1) {
			// #ifdef APP-PLUS
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			currentWebview.hideTitleNViewButtonRedDot({
				index
			});
			// #endif
			uni.navigateTo({
				url: '/pages/notice/notice'
			});
		}
	},
	// #endif
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		goLe(e) {
			// console.log(e);
			if(e==4){
				uni.showToast({
					title: '涞了么优选5月5日正式在徐州推出涞了么出行，打车出行用涞了么更方便，您的专属司机为您服务～涞了么、来了',
					icon: 'none'
				});
				return
			}
			uni.showToast({
				title: '暂未开放',
				icon: 'none'
			});
		},
		goOdershare() {
			this.$api.request('order', 'userHaveHelpOrder', {}).then(res => {
				// uni.hideLoading();
				// console.log(res);
				if (res.data == 0) {
					uni.showToast({
						title: '您暂无助力订单',
						icon: 'none'
					});
				} else {
					uni.navigateTo({
						url: '../order/share'
					});
				}
			});
			// return
			// console.log(1);
		},
		showTuan() {
			console.log(55555);

			this.$api.request('activity', 'selectFatherInviteByUserId', {}).then(res => {
				if (res.data.length == 0) {
					this.father = '涞了么，来了';
					this.fatherPhone = '';
				} else {
					this.father = res.data[0].userDO.nickname;
					this.fatherPhone = res.data[0].userDO.phone;
				}
			});
		},
		showAllOrder() {
			if (this.userInfotz.id == undefined) {
				return;
			}
			this.$api
				.request('user', 'getUserOrderCount', {
					userId: this.userInfotz.id
				})
				.then(res => {
					this.allOder = res.data;
					// uni.hideLoading();
					console.log(res);
				});
		},
		GoList() {
			uni.navigateTo({
				url: '../list/list'
			});
		},
		chauxn() {
			if (this.userInfotz.id == undefined) {
				return;
			}
			var obj = {};
			obj.userId = this.userInfotz.id;
			var that = this;
			// console.log(obj,5566);
			that.$api
				.request('user', 'getUserInfo', obj, failres => {
					that.$api.msg(failres.errmsg);
					uni.hideLoading();
				})
				.then(res => {
					if (res.errno == '200') {
						if (res.data) {
							console.log(res.data);
							this.userInfotz = res.data;
							this.userInfotz.isChief = res.data.isChief;
						}
					}
				});
		},
		async loadFootprint() {
			const that = this;
			that.$api.request('footprint', 'getAllFootprint').then(res => {
				that.footprintList = res.data;
			});
		},
		chengweiBtn() {
			console.log('团长', this.userInfotz);

			if (this.userInfotz.isChief == '-1') {
				//未申请
				uni.navigateTo({
					url: '/pages/user/chengweiTZ'
				});
			}
			if (this.userInfotz.isChief == '0') {
				this.$api.msg('待审核');
				return;
			}

			if (this.userInfotz.isChief == '2') {
				this.$api.msg(this.userInfotz.remark);
				return;
			}
			if (this.userInfotz.isChief == '1') {
				//申请成功
				uni.navigateTo({
					url: '/pages/user/shouyiTZ'
				});
			}
		},
		deleteFootprint(item) {
			const that = this;
			uni.showModal({
				title: '删除？',
				content: '您确定要删除此足迹吗？',
				success: e => {
					if (e.confirm) {
						that.$api
							.request('footprint', 'deleteFootprint', {
								footprintId: item.id
							})
							.then(res => {
								that.loadFootprint();
							});
					}
				}
			});
		},

		toLogin() {
			console.log('this.hasLogin', this.hasLogin);
			// uni.navigateTo({
			// 	url: '/pages/public/login'
			// })
			if (!this.hasLogin) {
				uni.navigateTo({
					url: '/pages/public/login'
				});
			}
		},

		logout() {
			const that = this;
			uni.showModal({
				title: '询问',
				content: '您确定要退出吗？',
				cancelText: '取消',
				confirmText: '确定',
				success: e => {
					if (e.confirm) {
						that.$store.commit('logout');
						that.$api.logout();
					}
				}
			});
		},

		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			if (!this.hasLogin) {
				url = '/pages/public/login';
			}
			uni.navigateTo({
				url
			});
		},

		/**
		 *  会员卡下拉和回弹
		 *  1.关闭bounce避免ios端下拉冲突
		 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
		 *    transition设置0.1秒延迟，让css来过渡这段空窗期
		 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
		 */
		coverTouchstart(e) {
			if (pageAtTop === false) {
				return;
			}
			this.coverTransition = 'transform .1s linear';
			startY = e.touches[0].clientY;
		},
		coverTouchmove(e) {
			moveY = e.touches[0].clientY;
			let moveDistance = moveY - startY;
			if (moveDistance < 0) {
				this.moving = false;
				return;
			}
			this.moving = true;
			if (moveDistance >= 80 && moveDistance < 100) {
				moveDistance = 80;
			}

			if (moveDistance > 0 && moveDistance <= 80) {
				this.coverTransform = `translateY(${moveDistance}px)`;
			}
		},
		coverTouchend() {
			if (this.moving === false) {
				return;
			}
			this.moving = false;
			this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
			this.coverTransform = 'translateY(0px)';
		},
		//配送外区域选择区域
		chooseLocation() {
			uni.chooseLocation({
				success: res1 => {
					console.log(res1);
					this.district = res1.name;
					uni.showLoading({
						title: '加载中...'
					});
					this.$api
						.request(
							'position',
							'getRecentlyStorage',
							{
								lng: res1.longitude,
								lat: res1.latitude
							},
							failres => {
								uni.hideLoading();
								this.logining = false;
								this.$api.msg(failres.errmsg);
								this.$store.commit('setStorage', 11);
								this.loadData(11);
								if (!11) {
									this.storage ? (this.storage = false) : (this.storage = true);
								} else {
									this.loadRecommand('refresh');
								}
							}
						)
						.then(res => {
							uni.hideLoading();
							console.log(res);
							// res.data.id = 11
							this.$store.commit('setStorage', res.data.id);
							this.newTop = [];
							this.cheapRecommend = [];
							this.salesTop = [];
							this.loadData(res.data.id);
							if (!res.data.id) {
								this.storage = false;
							} else {
								this.storage ? (this.storage = false) : (this.storage = true);
								// this.loadRecommand('refresh')
							}
						});
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	width: 100%;
	height: 100%;
	background-color: #f0f1f3;

	box-sizing: border-box;
}
.headBox {
	width: 100%;
	height: 144rpx;
	// background-color: red;
	// margin-top: 47rpx;
	padding: 0 52rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	image {
		width: 100rpx;
		height: 100rpx;
		margin-left: 18rpx;
		border-radius: 999rpx;
	}
	.bad {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		margin-left: 18rpx;
		color: #112a00;
		.boi {
			display: flex;
			align-items: center;
			font-size: 27rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #255c00;
			margin-top: 15rpx;
			image {
				width: 22rpx;
				height: 39rpx;
				border-radius: 0;
				margin-right: 24rpx;
			}
			.mf {
				margin-right: 12rpx;
			}
		}
	}
}
.dingdan {
	width: 90%;
	height: 240rpx;
	background-color: #ffffff;
	margin: 0 auto;
	margin-top: 34rpx;
	overflow: hidden;
	border-radius: 20px 20px 0px 0px;
	.title {
		width: 100%;
		margin: 27rpx 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #296700;
	}
	.bodd {
		width: 100%;
		// height: ;

		padding: 0 50rpx;
		box-sizing: border-box;
		justify-content: space-between;
		display: flex;
		align-items: center;
		.iteme {
			text-align: center;
			image {
				width: 60rpx;
				height: 60rpx;
			}

			.bme {
				width: 100rpx;
				margin-top: 29rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #0e2400;
			}
		}
	}
}

.bate {
	width: 90%;
	background-color: #ffffff;
	// height: 540rpx;
	margin: 0 auto;
	margin-top: 26rpx;
	// padding: 0 67rpx;
	padding-bottom: 64rpx;
	box-sizing: border-box;
	display: flex;
	
border-radius: 0px 0px 10rpx 10rpx;
	// align-items: center;
	// justify-content: space-between;
	flex-wrap: wrap;
	.itemOne {
		position: relative;
		button {
			width: 100%;
			height: 100%;
			position: absolute;
			opacity: 0;
		}
		text-align: center;
		// background-color: red;
		width: 25%;
		margin-top: 60rpx;
		image {
			z-index: 10;
			width: 56rpx;
			height: 55rpx;
			text-align: center;
		}
		.txt {
			z-index: 10;
			margin-top: 24rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #0e2200;
		}
	}

	.itemOneTwo {
		text-align: center;
		// background-color: red;
		width: 25%;
		margin-top: 60rpx;
		image {
			width: 56rpx;
			height: 56rpx;
			text-align: center;
		}
		.txt {
			margin-top: 24rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #0e2200;
		}
	}
}
</style>
